<template>
	<view class="content">
		<view class="hb">
			<ul class="flex ul">
				<li  v-for="(item,index) in hb_list" :key="index" @click="change(index)" :class="{'active':isActive==index}"> 
					{{item.title}}
				</li>
			</ul>
			<ul class="present">
				<li v-for="(item,index) in bottom" :key="index" v-if="currentId==index">
					<p @click="jumpDetail(item.id)">{{item.text}}</p>
					<image :src="item.src" mode="" class="img"></image>
				</li>
				
			</ul>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				isActive:0,
				index:0,
				currentId:'',
				hb_list:[
					{id:'1',title:'我的礼品'},
					{id:'2',title:'礼品兑换'}
				],
				bottom:[
					{id:'1',src:'/static/images/collect.gif',text:'如何看快递？'},
					{id:'2',src:'/static/images/collect.gif',text:'如何兑换'}
				]
			}
		},
		methods:{
			change:function(index){
				//console.log(index)
				this.isActive = index;
				this.currentId= index
			},
			jumpDetail:function(id){
				if(id==1){
					uni.navigateTo({
					url: './sanji/lipin2',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
				}else{
					uni.navigateTo({
						url: './sanji/lipin3',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.active{border-bottom: 5rpx solid red;}
	.img{display: block;width:200rpx;height: 200rpx;margin: 20rpx auto;}
	.hb .ul {width: 90%;margin: 0 auto;text-align: center;height: 80rpx;line-height: 80rpx;}
	.hb .ul li {width: 40%;}
	.present p{margin: 40rpx 0rpx;display: flex;justify-content: flex-end;}
		 
	.flex{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;}
</style>